<template>
	<view class="chatContent">
		<u-navbar back-text="返回" :title="name" :background="background"></u-navbar>
		<view style="padding-bottom: 150rpx;">
			<block v-for="(item, index) in chatMsgList" :key="index">
				<!-- 时间 -->
				<view class="time" v-if="item.dateTime">{{item.dateTime}}</view>
				<!-- 主体内容 左侧用户-->
				<view class="chackBox" v-if="item.sender">
					<view class="chatBox-item">
						<!-- 头像 -->
						<image class="face-box" :src="item.face"></image>
						<!-- 内容区域 -->
						<view class="contentBox">
							<view class="senderName">
								{{item.sender}}
							</view>
							<view v-if="item.msgType === 'text'" class="sendTxt">
								{{item.msgInfo}}
							</view>
							<view v-else>
								<image :src="item.msgInfo" style="width: 276rpx; height: 184rpx;"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 将内容和头像换一个位置就实现了掉转  右侧用户-->
				<view class="chackBox chackBox-r" v-else>
					<view class="chatBox-item chatBox-item-r">
						<!-- 内容区域 -->
						<view class="contentBox">
							<view v-if="item.msgType === 'text'" class="sendTxt">
								{{item.msgInfo}}
							</view>
							<view v-else>
								<image :src="item.msgInfo" style="width: 276rpx; height: 184rpx;"></image>
							</view>
						</view>
						<!-- 头像 -->
						<image class="face-box face-box-r" src="../../static/faces/1-thump.jpg"></image>
					</view>
				</view>
			</block>
		</view>
		<!-- 底部对话框 -->
		<view class="dialogBox">
			<view class="left-icon" @click="changeIcon">
				<u-icon name="volume-fill" size="52" v-if="volume"></u-icon>
				<u-icon name="mic" size="52" v-else></u-icon>
			</view>
			<view class="iptBox">
				<view class="ipt" v-if="volume" @touchstart="startvolume" @touchend="stopvolume" style="cursor: pointer">按住 说话</view>
				<input type="text" v-model="iptVal" class="ipt" focus v-else style="text-align: left; padding-left: 10rpx;" @input="onKeyInput" />
			</view>
			<view class="right-icon">
				<button type="default" v-if="isbtn" size="mini" class="btn" @click="sendInfo">发送</button>
				<u-icon name="camera" size="52" @click="sendPhotoes"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	// chatMsgList 聊天记录列表
	import chatMsgList from '../../common/chatMsgList.js'
	const recorderManager = uni.getRecorderManager()
	export default {
		data() {
			return {
				name: '',
				background: {
					backgroundColor: '#f8f8f8'
				},
				chatMsgList,
				volume: true,
				isbtn: false,
				iptVal: '',
			};
		},
		onLoad(option) {
			this.name = option.name
		},
		onShow() {
			if (uni.getStorageSync('chatMsgList')) {
				this.chatMsgList = JSON.parse(uni.getStorageSync('chatMsgList'))
				this.$nextTick(() => {
					this.scrollToBottom()
				})
			}

		},
		methods: {
			// 页面随内容滚动
			scrollToBottom() {
				uni.pageScrollTo({
					scrollTop: 9999999,
					duration: 0,
				})
			},
			changeIcon() {
				this.volume = !this.volume
			},
			//实时获取输入框内容
			onKeyInput(e) {
				console.log(e.detail.value)
				if (e.detail.value) {
					this.isbtn = true
					this.iptVal = e.detail.value
				}
			},
			// 发送信息
			sendInfo() {
				// 如果input框有值,在点击发送时,将数据添加到chatMsgList数组里
				if (this.iptVal) {
					this.chatMsgList.push({
						msgType: 'text',
						msgInfo: this.iptVal
					})
					this.chatMsgList.push({
						sender: '前端课堂',
						face: '/static/faces/3-thump.jpg',
						msgType: 'img',
						msgInfo: '/static/imgs/3.jpg'
					})
				}

				this.iptVal = ''
				this.$nextTick(() => {
					this.scrollToBottom()
				})
				uni.setStorageSync('chatMsgList', JSON.stringify(this.chatMsgList))

			},
			// 发送图片
			sendPhotoes() {
				uni.chooseImage({
					success: (res) => {
						console.log(res.tempFilePaths[0])
						if (res.tempFilePaths[0]) {
							this.chatMsgList.push({
								msgType: 'img',
								msgInfo: res.tempFilePaths[0]
							})
							this.chatMsgList.push({
								sender: '前端课堂',
								face: '/static/faces/3-thump.jpg',
								msgType: 'text',
								msgInfo: '接收到你的图片'
							})
						}
						this.$nextTick(() => {
							this.scrollToBottom()
						})
						uni.setStorageSync('chatMsgList', JSON.stringify(this.chatMsgList))
					}
				})
			},
			// 发送语音
			startvolume() {
				console.log(recorderManager)
				console.log(111)
				recorderManager.start({
					duration: 120000
				})
			},
			// 停止录音
			stopvolume() {
				console.log(222)
				recorderManager.stop()
			}

		}
	}
</script>

<style lang="scss">
	.chatContent {
		background-color: #f1f1f1;
		min-height: 100vh;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
	}

	.time {
		margin: 40rpx 0;
		text-align: center;
		color: #888888;
	}

	.chackBox {
		width: 100%;
		display: flex;
	}

	.chackBox-r {
		justify-content: flex-end;
	}

	.chatBox-item {
		width: 604rpx;
		display: flex;
		margin-bottom: 40rpx;

		.face-box {
			width: 84rpx;
			height: 84rpx;
			margin-left: 40rpx;
		}

		.contentBox {
			margin-left: 20rpx;
			flex: 1;

			.sendTxt {
				background-color: #fff;
				padding: 20rpx;
				margin-top: 10rpx;
				border-radius: 10rpx;
				float: left;
			}

		}
	}

	.chatBox-item-r {
		display: flex;
		justify-content: flex-end;

		.face-box {
			margin-left: 0;
			margin-right: 40upx
		}

		.contentBox {
			margin-right: 20rpx;

			image {
				float: right;
			}

			.sendTxt {
				float: right;
			}
		}
	}

	// 底部对话框
	.dialogBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120upx;
		border-top: 2rpx solid #e7e7e7;
		padding: 0 40rpx;
		display: flex;
		align-items: center;

		.left-icon,
		.right-icon {
			// width: 120rpx;
			// // margin-right: 68rpx;
		}

		.right-icon {

			// margin-left: 68rpx;
			.btn {
				height: 52rpx;
				color: #fff;
				background-color: #008000;
				margin-right: 8rpx;
				font-size: 24rpx;
				line-height: 52rpx;
				margin-top: 9rpx;
			}
		}

		.iptBox {
			flex: 1;
			margin: 0 20rpx;

			.ipt {
				width: 100%;
				height: 70rpx;
				background-color: #fff;
				font-size: 28rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}
	}
</style>
